import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Form, Button, Card, Input, InputNumber, Popover, notification } from 'antd';
import FormCondition from '@/components/FormCondition';
import { Row, Col, Tooltip, Space } from 'antd'
import FlxButton from '@/components/FlxButton'
const validUserCondition = (props) => {
    const { dispatch } = props;
    const [data, setData] = useState({})
    const [params, setParams] = useState({
    })
    const [form] = Form.useForm();
    const [fieldsList, setFieldsList] = useState([])
    const formItemLayout = {
        labelCol: {
            sm: { span: 0 },
        },
        wrapperCol: {
            sm: { span: 0 },
        },
    };
    const fetchData = () => {
        dispatch({
            type: 'promoter/fetchPromoterConfigDetail',
            callback: (e) => {
                const { id, validUserCondition } = e
                const validUserList = validUserCondition.length > 0 ? JSON.parse(validUserCondition).field.split(',') : []
                setData({
                    validUserList
                })

                setParams({
                    id
                })
            }
        })
    }
    const fetchField = () => {
        dispatch({
            type: 'promoter/fetchListPromoterValidUserField',
            callback: (e) => {
                const { fieldList = [] } = e
                setFieldsList(fieldList)
            }
        })
    }
    const fetchRoleEdit = () => {
        form.validateFields().then((values) => {
            const { validUserList
            } = values
            let validUserCondition = ''
            if (validUserList && validUserList.length > 0) {
                validUserCondition = JSON.stringify({ field: validUserList.toString() })
            }
            dispatch({
                type: 'promoter/fetchPromofakeSavePromoterConfigterWebPage',
                payload: {
                    ...params,
                    validUserCondition
                },
                callback: () => {
                    fetchData()
                }
            })

        });
    };
    useEffect(() => {
        fetchData()
        fetchField()
    }, [])
    const formItems = [
        {
            label: '有效用户条件',
            name: 'validUserList',
            type: 'checkbox',
            direction: 'vertical',
            rules: [{ required: false }],
            select: fieldsList,
            fieldNames: { label: 'fieldName', value: 'field' },
        },
    ];
    return (
        <div style={{ fontSize: 28 }}>
            <Row>
                <Col span={24}>
                    <div style={{ paddingTop: 12 }}>
                        <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems} initialValues={data}></FormCondition>
                    </div>
                </Col>
                <FlxButton onOk={fetchRoleEdit}></FlxButton>
            </Row>

        </div>
    );
}
export default connect(({ loading }) => ({
    loading: loading.models.promoter,
}))(validUserCondition);
